<template>
    <div class="app-content" style="height:100%;width:100%">
        <div id="stencilContainer" style="height:100%;width:30%;float: left;position: relative;"></div>
        <div id="container" style="height:100%;width:69%;float: right;"></div>
    </div>
</template>
  
<script >
import { defineComponent } from "vue";
import HelloWorld from '../components/HelloWorld.vue'
import { Graph } from "@antv/x6";
import { register } from "@antv/x6-vue-shape";
import { Snapline } from '@antv/x6-plugin-snapline'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Selection } from "@antv/x6-plugin-selection";
import { Transform } from '@antv/x6-plugin-transform'


const commonAttrs = {
    body: {
        fill: '#fff',
        stroke: '#8f8f8f',
        strokeWidth: 1,
    },
}

register({
    shape: "custom-vue-node",
    width: 100,
    height: 100,
    component: HelloWorld,
    ports: {
        groups: {
            top: {
                position: 'top',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
            bottom: {
                position: 'bottom',
                attrs: {
                    circle: {
                        magnet: true,
                        stroke: '#8f8f8f',
                        r: 5,
                    },
                },
            },
        },
    },
});

export default defineComponent({
    name: "X6Demo2",
    components: {
    },
    mounted() {
        const graph = new Graph({
            container: document.getElementById("container"),
            background: {
                color: "#ccc",
            },
            // autoResize: true,
            resizing: {
                enabled: true
            },
            connecting: {
                snap: {
                    radius: 50,
                },
                allowBlank: false,
                highlight: true,
                sourceAnchor: {
                    name: "right",
                },
                targetAnchor: {
                    name: "right",
                },
                connectionPoint: "anchor",
                allowNode: true,
            },
            highlighting: {
                magnetAvailable: {
                    name: "stroke",
                    args: {
                        padding: 2,
                        attrs: {
                            "stroke-width": 2,
                            stroke: "red",
                        },
                    },
                },
                magnetAdsorbed: {
                    name: 'stroke',
                    args: {
                        attrs: {
                            fill: '#5F95FF',
                            stroke: '#5F95FF',
                        },
                    },
                },
            },
            // highlighting: true,
            interacting: true
        });

        graph.use(
            new Selection({
                enabled: true,
                multiple: true,
                rubberband: true,
                movable: true,
                showNodeSelectionBox: true,
            })
        );

        graph.use(new Transform({
            resizing: {
                enabled: true,
                // minWidth: 200,
                orthogonal: true,
                allowReverse: true,
                autoScroll: true,
                restrict: false,
                preserveAspectRatio: false,
            },
            rotating: false,
        }));

        graph.use(
            new Snapline({
                enabled: true,
                sharp: true,
            }),
        )


        // let s = graph.addNode({
        //     shape: "custom-vue-node",
        //     x: 100,
        //     y: 60,
        //     width: 400,
        //     height: 100,
        //     data: {
        //         title: 'test',
        //         columns: [{
        //             title: '姓名2',
        //             dataIndex: 'name',
        //             key: 'name',
        //             resizable: true,
        //             width: 150,
        //         },
        //         {
        //             title: '年龄3',
        //             dataIndex: 'age',
        //             key: 'age',
        //             resizable: true,
        //             width: 100,
        //             minWidth: 100,
        //             maxWidth: 200,
        //         },
        //         {
        //             title: '住址',
        //             dataIndex: 'address',
        //             key: 'address',
        //         },],
        //         dataSource: [{
        //             key: '1',
        //             name: '西湖区湖底公园1号西',
        //             age: 123,
        //             address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        //         },
        //         {
        //             key: '2',
        //             name: '胡彦祖',
        //             age: 42,
        //             address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        //         },]
        //     },
        //     attrs: {
        //         body: {
        //             rx: 4, // 圆角矩形
        //             ry: 4,
        //             strokeWidth: 0.4,
        //             stroke: "white",
        //             fill: "white",
        //         },
        //     },
        //     ports: {
        //         items: [
        //             {
        //                 id: 'port_1',
        //                 group: 'top',
        //             },
        //             {
        //                 id: 'port_2',
        //                 group: 'bottom',
        //             },
        //         ],
        //     },
        // });


        // let t = graph.addNode({
        //     shape: "custom-vue-node",
        //     x: 200,
        //     y: 260,
        //     width: 400,
        //     height: 200,
        //     data: {
        //         title: 'test1',
        //         columns: [{
        //             title: '姓名2',
        //             dataIndex: 'name',
        //             key: 'name',
        //             resizable: true,
        //             width: 150,
        //         },
        //         {
        //             title: '年龄3',
        //             dataIndex: 'age',
        //             key: 'age',
        //             resizable: true,
        //             width: 100,
        //             minWidth: 100,
        //             maxWidth: 200,
        //         },
        //         {
        //             title: '住址',
        //             dataIndex: 'address',
        //             key: 'address',
        //         },],
        //         dataSource: [{
        //             key: '1',
        //             name: '768',
        //             age: 123,
        //             address: '3453',
        //         },
        //         {
        //             key: '2',
        //             name: '胡彦祖',
        //             age: 42,
        //             address: '12312',
        //         },]
        //     },
        //     attrs: {
        //         body: {
        //             rx: 4, // 圆角矩形
        //             ry: 4,
        //             strokeWidth: 0.4,
        //             stroke: "white",
        //             fill: "white",
        //         },
        //     },
        //     ports: {
        //         items: [
        //             {
        //                 id: 'port_1',
        //                 group: 'top',
        //             },
        //             {
        //                 id: 'port_2',
        //                 group: 'bottom',
        //             },
        //         ],
        //     },
        // });

        // graph.addEdge({
        //     source: {
        //         cell: s,
        //         anchor: {
        //             name: "right",
        //         },
        //         connectionPoint: "anchor",
        //     },
        //     target: {
        //         cell: t,
        //         anchor: {
        //             name: "left",
        //         },
        //         connectionPoint: "anchor",
        //     },
        // });
        let currentNodeSize = null;
        // graph.on('node:resize', ({ cell, e, x, y, node, view }) => {
        //     // console.log("node:resize",e, x, y, node, view)
        //     currentNodeSize = Object.assign({}, node.size());
        //     console.log('node:resize', node.getProp('size'));
        // });
        // graph.on('node:resizing', ({ cell, e, x, y, node, view }) => {
        //     // console.log("node:resizing",e, x, y, node, view)
        //     console.log("height", view?.selectors?.foContent?.firstChild?.clientHeight);
        //     if (!currentNodeSize || !view?.selectors?.foContent?.firstChild?.clientHeight) {
        //         return;
        //     }
        //     const size = node.getProp("size");
        //     console.log("node:resizing", size.width, size.height);
        //     if (Math.abs(view?.selectors?.foContent?.firstChild?.clientHeight - size.height) < 10) {
        //         return;
        //     }
        //     node.setProp('size', { width: size.width, height: view.selectors.foContent.firstChild.clientHeight })
        // })
        // graph.on('node:resized', ({ cell, e, x, y, node, view }) => {
        //     // console.log("node:resized",e, x, y, node, view)
        //     currentNodeSize = null;
        // })

        graph.on("node:added", ({ node, index, options }) => {
            console.log("node added",node,index,options,node.getData());
            node.setProp({
                width: 40,
                height: 40,
                label: 'circle',
                attrs: commonAttrs,
            });
            node.removePorts();
            node.addPorts([{
                id:"1",
                group:'list'
            }])

        });

        const stencil = new Stencil({
            title: 'Components',
            target: graph,
            search(cell, keyword) {
                return cell.shape.indexOf(keyword) !== -1
            },
            placeholder: 'Search by shape name',
            notFoundText: 'Not Found',
            collapsable: true,
            stencilGraphWidth: 200,
            stencilGraphHeight: 100,
            groups: [
                {
                    name: 'group1',
                    title: 'Group(Collapsable)',
                },
                {
                    name: 'group2',
                    title: 'Group',
                    collapsable: false,
                },
            ],
        })

        document.getElementById("stencilContainer").appendChild(stencil.container)

        Graph.registerPortLayout(
            'erPortPosition',
            (portsPositionArgs) => {
                return portsPositionArgs.map((_, index) => {
                    return {
                        position: {
                            x: 0,
                            y: (index) * 40,
                        },
                        angle: 0,
                    }
                })
            },
            true,
        )

        const n1 = graph.createNode({
            shape: 'rect',
            x: 40,
            y: 40,
            width: 80,
            height: 40,
            label: 'rect',
            attrs: commonAttrs,
            data:{
                type:'tableEntity',
                name:'test',
            },
            ports: {
                groups: {
                    list: {
                        markup: [
                            {
                                tagName: 'circle',
                                selector: 'portBody',
                            },
                        ],
                        attrs: {
                            portBody: {
                                r:10,
                                strokeWidth: 1,
                                stroke: 'transparent',
                                fill: 'transparent',
                                magnet: true,
                            },
                        },
                        //position: 'erPortPosition',
                    },
                },
            },
            tools: [
                {
                    name: 'node-editor',
                    args: {
                        attrs: {
                            backgroundColor: '#EFF4FF',
                        },
                    },
                },
            ],
        })

        const n2 = graph.createNode({
            shape: 'circle',
            x: 180,
            y: 40,
            width: 40,
            height: 40,
            label: 'circle',
            attrs: commonAttrs,
        })

        const n3 = graph.createNode({
            shape: 'ellipse',
            x: 280,
            y: 40,
            width: 80,
            height: 40,
            label: 'ellipse',
            attrs: commonAttrs,
        })

        const n4 = graph.createNode({
            shape: 'path',
            x: 420,
            y: 40,
            width: 40,
            height: 40,
            // https://www.svgrepo.com/svg/13653/like
            path: 'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
            attrs: commonAttrs,
            label: 'path',
        })

        stencil.load([n1, n2], 'group1')
        stencil.load([n3, n4], 'group2')
    },
});
</script>
<style>
html,
body,
#app,
#x6Container,
#app-content,
#container {
    width: 100%;
    height: 100%;
}
</style>